import React from 'react';
import { Link, browserHistory } from 'react-router';
// 引入Antd的导航组件
import { Menu, Icon, Layout, Breadcrumb, Badge } from 'antd';
const SubMenu = Menu.SubMenu;
const { Header, Content, Footer, Sider } = Layout;
import * as actions from './../../actions/frontEnd/loginAction';

export default class indexHome extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          myProfile: {}
      };
    }
    componentWillMount() {
      if(sessionStorage.getItem("username") != null){
        actions.findProfileById(this);
      }
      if(this.props.location.pathname == "/"){
        browserHistory.push("/index");
      }
    }
    shouldComponentUpdate(obj){
      if(obj.location.pathname == "/" && location.href.includes("/index") == false){
        setTimeout(function(){
          browserHistory.push("/index");
        }, 500);
      }
      return true;
    }
    myProfile(){
      browserHistory.push('/myProfile');
    }
    changePwd(){
      browserHistory.push('/changePwd');
    }
    logout(){
      sessionStorage.removeItem("userAuth");
      sessionStorage.removeItem("username");
      location.reload();
    }
    render() {
      var myFROBA = null; var spanLogin = null;
      if(this.state.myProfile.email == undefined){
        var username = sessionStorage.getItem("username");
        if(username != null){
          myFROBA = <span>
            <img src="/src/styles/images/default.png" className="imgHeader" />
            <span>{username}</span>
          </span>
        }else {
          myFROBA = <span>
            <img src="/src/styles/images/default.png" className="imgHeader" />
            <span>未登录</span>
          </span>
        }
      }else {
        myFROBA = <span>
          <img src={(this.state.myProfile.photoPic)?"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + this.state.myProfile.photoPic:"/src/styles/images/default.png"} className="imgHeader" />
          <span>{this.state.myProfile.email}</span>
        </span>
      }
      if(sessionStorage.getItem("username") == null){
        var locationPath = this.props.routes[this.props.routes.length - 1].path;

        if(locationPath.includes("productDetail") == true || locationPath.includes("myProfile") == true || locationPath.includes("changePwd") == true || locationPath.includes("shoppingCart") == true || locationPath.includes("myFavorites") == true ){
          spanLogin = <span>
            <a href="/index">首页</a>
            <a href="/login">登录</a>
            <a href="/registered">注册</a>
          </span>
        }else {
          spanLogin = <span>
            <a href="/login">登录</a>
            <a href="/registered">注册</a>
          </span>
        }
      }else {
        var locationPath = this.props.routes[this.props.routes.length - 1].path;
        if(locationPath.includes("productDetail") == true || locationPath.includes("myProfile") == true || locationPath.includes("changePwd") == true || locationPath.includes("shoppingCart") == true || locationPath.includes("myFavorites") == true){
          spanLogin = <span>
            <a href="/index">首页</a>
          </span>
        }
      }
      return (
          <div style={{height: '943px'}}>
            <div className="header_top">
              <div className="header_top_box">
                <a href="/index" style={{color: 'gray'}}>欢迎你到 FROBA</a>
                {spanLogin}
                <Menu mode="horizontal" className="menu" selectable={false}>
                  <SubMenu key="sub1" title={myFROBA} disabled={(sessionStorage.getItem("username") == null)?true:false}>
                    <Menu.Item key="key1" onClick={this.changePwd}><Icon type="edit" style={{fontSize: '18px', verticalAlign: 'text-bottom'}}/>修改密码</Menu.Item>
                    <Menu.Divider/>
                    <Menu.Item key="key2" onClick={this.myProfile}><Icon type="idcard" style={{fontSize: '18px', verticalAlign: 'text-bottom'}}/>个人信息</Menu.Item>
                    <Menu.Divider/>
                    <Menu.Item key="key3" onClick={this.logout}><Icon type="logout" style={{fontSize: '18px', verticalAlign: 'text-bottom'}}/>退出登录</Menu.Item>
                  </SubMenu>
                </Menu>
              </div>
            </div>
            { this.props.children }
          </div>
      )
    }
}
